<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>ISeeAdmin 【饼图】 </title>
    <!--    <link rel="stylesheet" href="/static/element/index.css">-->
    <link href="https://cdn.staticfile.org/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/css/common.css">
    <!--    开发环境-->
    <!--        <script src="/static/js/iseeadmin.js"></script>-->
    <!--    正式环境-->
    <script src="/static/js/iseeadmin.min.js"></script>
    <script src="/static/js/menu.js"></script>
    <!--    开发环境-->
    <!--    <script src="/static/js/vue.js"></script>-->
    <!--    正式环境-->
    <!--        <script src="/static/js/vue.min.js"></script>-->
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <!--    <script src="/static/element/index.js"></script>-->
    <script src="https://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0-rc.2/echarts.min.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <el-container style="height: 100%;min-height:100vh;">
        <el-aside v-show="iseeData.asideShow" width="210px">
            <!--            左侧logo 开始-->
            <div class="aside-logo">
                <img class="aside-logo-img" src="/static/images/logo.png"
                     alt=""> ISeeAdmin
            </div>
            <!--            左侧logo 结束-->
            <!--            左侧菜单 开始-->
            <el-menu @select="iseeMenuOpen" style="width: 210px;"
                     unique-opened
                     :default-active="iseeData.defaultActive"
                     background-color="#304156"
                     text-color="#bfcbd9"
                     active-text-color="#409eff">
                <iseemenu :menu="iseeData.menu"></iseemenu>
            </el-menu>
            <!--            左侧菜单 结束-->
        </el-aside>

        <el-container>
            <el-header height="83px">
                <div class="isee-header-div">
                    <!--                    面包屑 开始-->
                    <div style="width: 100%;display: inherit;">
                        <span class="aside-show" @click="iseeAsideShow">
                            <i :class="iseeData.asideShowIcon"></i>
                        </span>

                        <el-breadcrumb style="line-height: 50px" separator="/">
                            <el-breadcrumb-item v-for="(item,index) in iseeData.breadcrumb" :key="index">{{item.title}}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <!--                    面包屑 结束-->
                    <!--                    icon功能列表，可根据需要修改 开始-->
                    <div>
                        <ul class="isee-ul">
                            <li class="isee-li">
                                <i style="font-size: 20px" class="el-icon-bell"></i>
                            </li>
                            <li @click="iseeFullScreen" class="isee-li">
                                <span class="iconfont" style="font-size: 20px" v-html="iseeData.fullscreenIcon"></span>
                            </li>
                            <li class="isee-li" @click="iseeData.drawer = true">
                                <span class="iconfont" style="font-size: 20px">&#xe602;</span>
                            </li>
                        </ul>
                    </div>
                    <!--                    icon功能列表，可根据需要修改 结束-->
                    <!--                    avatar显示 开始-->
                    <div>
                        <el-dropdown @command="iseeOpenUrl">
                              <span class="el-dropdown-link">
                                  <el-avatar style="margin-top: 9px" :size="iseeData.avatar.size"
                                             :src="iseeData.avatar.url"></el-avatar>
                              </span>

                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in iseeData.avatar.list" :icon="item.icon"
                                                  :key="index" :command="index">{{item.title}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!--                    avatar显示 结束-->
                </div>
                <div style="display: flex">
                    <!--                    标签页列表 开始-->
                    <span @click="iseeTagDivMove(1)" class="isee-tag-span">
                        <i class="el-icon-d-arrow-left"></i>
                    </span>
                    <div ref="iseeTagDiv" class="isee-tag-div">
                        <el-tag style="cursor:pointer;margin-right: 5px;" v-for="(item,index) in iseeData.tagList"
                                :key="index"
                                @click="iseeTagSwitch(item.url,item.index,item.breadcrumb)"
                                :effect="item.effect"
                                :type="item.type"
                                @close="iseeTagClose(item.url,index)"
                                size="medium"
                                :closable="item.closable"><i v-show="item.show" class="el-icon-view"></i> {{item.title}}
                        </el-tag>
                    </div>
                    <span @click="iseeTagDivMove(2)" class="isee-tag-span">
                        <i class="el-icon-d-arrow-right"></i>
                    </span>
                    <!--                    标签页列表 结束-->
                    <!--                    标签页集中操作 开始-->
                    <div style="float: right;margin-left: 10px">
                        <el-dropdown @command="iseeTagCommandClose">
                          <span class="el-dropdown-link">
                              <i class="el-icon-arrow-down isee-el-icon-arrow-down"></i>
                          </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="1">关闭当前标签页</el-dropdown-item>
                                <el-dropdown-item command="2">关闭其它标签页</el-dropdown-item>
                                <el-dropdown-item command="3">关闭全部标签页</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!--                    标签页集中操作 结束-->
                </div>

                <!--抽屉式展示-->
                <el-drawer
                        title="iseeAdmin"
                        :visible.sync="iseeData.drawer"
                        :direction="iseeData.direction"
                        :show-close="iseeData.showClose"
                        custom-class="isee-drawer-info"
                >
                    <el-divider></el-divider>
                    <div style="font-size: 14px">
                        <p class="isee-title">版本信息</p>
                        <ul class="isee-drawer-ul">
                            <li>
                                当前版本：iseeAdmin-v{{iseeData.version}}
                            </li>
                            <li>
                                基于框架：vue v2.6.10，element v2.12.0
                            </li>
                            <li>
                                下载地址：
                                <el-link type="primary" :underline="false" href="https://gitee.com/youge/iseeadmin"
                                         target="_blank">码云
                                </el-link>
                                |
                                <el-link type="primary" :underline="false" href="https://github.com/fukedi/iseeadmin"
                                         target="_blank">github
                                </el-link>
                            </li>
                        </ul>
                    </div>
                    <el-divider></el-divider>
                    <div style="font-size: 14px">
                        <p class="isee-title">关于版权</p>
                        <ul class="isee-drawer-ul">
                            <li>
                                iseeAdmin完全开源，可免费使用
                            </li>
                            <li>
                                QQ交流群：927049524
                            </li>
                        </ul>
                    </div>
                </el-drawer>
                <!--抽屉式展示 结束-->
            </el-header>

            <el-main>
                <!--                主内容展示-->
                <div>
                    <el-card class="box-card">
                        <p style="padding: 8px 16px;font-size: 14px;border-radius:4px;border-left: 5px solid #50bfff ">
                            <el-link target="_blank"
                                     href="https://www.echartsjs.com/examples/zh/index.html#chart-type-pie">饼图
                            </el-link>
                            <el-tooltip
                                    content="更多效果例子请看官网 " placement="top" effect="light"><i
                                    class="el-icon-info" style="color: gray"></i></el-tooltip>
                        </p>
                    </el-card>
                    <div style="display: flex">
                        <el-card class="box-card">
                            <div ref="chart1" style="width: 650px;height:400px;"></div>
                        </el-card>
                        <el-card class="box-card">
                            <div ref="chart2" style="width: 650px;height:400px;"></div>
                        </el-card>
                    </div>
                    <div style="display: flex">
                        <el-card class="box-card">
                            <div ref="chart3" style="width: 650px;height:400px;"></div>
                        </el-card>
                        <el-card class="box-card">
                            <div ref="chart4" style="width: 650px;height:400px;"></div>
                        </el-card>
                    </div>
                    <div style="display: flex">
                        <el-card class="box-card">
                            <div ref="chart5" style="width: 650px;height:400px;"></div>
                        </el-card>
                        <el-card class="box-card">
                            <div ref="chart6" style="width: 650px;height:400px;"></div>
                        </el-card>
                    </div>
                </div>
                <!--                主内容展示 结束-->
            </el-main>
        </el-container>
    </el-container>
</div>


<script>
  const iseeAvatar = {
    url: '/static/images/avatar01.gif',
    size: 32,
    list: [
      {
        index: '',
        indexPath: [],
        icon: 'el-icon-user-solid',
        url: '',
        target: '_self',
        title: 'admin',
      }, {
        index: '6-1-0',
        indexPath: ["6", "6-1", "6-1-0"],
        icon: 'el-icon-tickets',
        url: '/pages/sets/myset/profile.html',
        target: '_self',
        title: '基本资料',
      }, {
        index: '6-1-1',
        indexPath: ["6", "6-1", "6-1-1"],
        icon: 'el-icon-edit-outline',
        url: '/pages/sets/myset/password.html',
        target: '_self',
        title: '修改密码',
      }, {
        index: '',
        indexPath: [],
        icon: 'el-icon-switch-button',
        url: '',
        target: '_self',
        title: '安全退出',
      },
    ]
  }
  var iseemenu = {
    props: ['menu'],
    name: 'iseemenu',
    template: `
    <div>
        <template v-for="item in menu">
            <el-submenu :index="item.index" v-if="item.children.length">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                </template>
                <iseemenu :menu="item.children"></iseemenu>
            </el-submenu>
            <el-menu-item :index="item.index" v-else>
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
            </el-menu-item>
        </template>
    </div>`,
  }
  var app = new Vue({
    el: '#app',
    components: {
      iseemenu
    },
    data: {
      iseeData: {
        version: iseeAdmin.version,
        drawer: false,
        direction: 'rtl',
        showClose: false,
        status: false,
        show: true,
        asideShow: iseeAdmin.asideShow,
        asideShowIcon: iseeAdmin.asideShowIcon,
        fullscreen: false,
        fullscreenIcon: '&#xe610;',
        defaultActive: iseeAdmin.defaultActive,
        tagList: iseeAdmin.tagList,
        breadcrumb: iseeAdmin.breadcrumb,
        menu: iseeMenu,
        avatar: iseeAvatar
      },
      /*your data*/

    },
    methods: {
      iseeTagSwitch(url, index, breadcrumb) {
        iseeAdmin.iseeTagSwitch(url, index, breadcrumb, this.iseeData)
      },

      iseeTagClose(url, index) {
        iseeAdmin.iseeTagClose(url, index, this.iseeData)
      },

      iseeTagCommandClose(command) {
        iseeAdmin.iseeTagCommandClose(command, this.iseeData)
      },

      iseeMenuOpen(key, keyPath) {
        iseeAdmin.iseeMenuOpen(key, keyPath, this.iseeData)
      },

      iseeFullScreen() {
        iseeAdmin.iseeFullScreen(this.iseeData)
      },

      iseeAsideShow() {
        iseeAdmin.iseeAsideShow(this.iseeData)
      },
      iseeOpenUrl(command) {
        iseeAdmin.iseeMenuOpen(this.iseeData.avatar.list[command].index, this.iseeData.avatar.list[command].indexPath, this.iseeData)
      },
      iseeTagDivMove(flag) {
        flag == 1 ? this.$refs.iseeTagDiv.scrollLeft += 80 : this.$refs.iseeTagDiv.scrollLeft -= 80
      },
      /*your methods*/

    },
    beforeMount() {
      iseeAdmin.init(this.iseeData)
      /*your beforeMount*/
    },
    mounted() {
      var myChart1 = echarts.init(this.$refs.chart1);
      let option1 = null;
      option1 = {
        backgroundColor: '#2c343c',

        title: {
          text: 'Customized Pie',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },

        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series : [
          {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
              {value:335, name:'直接访问'},
              {value:310, name:'邮件营销'},
              {value:274, name:'联盟广告'},
              {value:235, name:'视频广告'},
              {value:400, name:'搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
      }

      var myChart2 = echarts.init(this.$refs.chart2);
      let option2 = null;
      option2 = {
        title:{
          text:'环形图'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:[
              {value:335, name:'直接访问'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              {value:1548, name:'搜索引擎'}
            ]
          }
        ]
      };
      if (option2 && typeof option2 === "object") {
        myChart2.setOption(option2, true);
      }

      var myChart3 = echarts.init(this.$refs.chart3);
      let option3 = null;
      var data = genData(50);
      option3 = {
        title : {
          text: '同名数量统计',
          subtext: '纯属虚构',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: data.legendData,

          selected: data.selected
        },
        series : [
          {
            name: '姓名',
            type: 'pie',
            radius : '55%',
            center: ['40%', '50%'],
            data: data.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      function genData(count) {
        var nameList = [
          '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
        ];
        var legendData = [];
        var seriesData = [];
        var selected = {};
        for (var i = 0; i < 50; i++) {
          let name = Math.random() > 0.65
            ? makeWord(4, 1) + '·' + makeWord(3, 0)
            : makeWord(2, 1);
          legendData.push(name);
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
          });
          selected[name] = i < 6;
        }

        return {
          legendData: legendData,
          seriesData: seriesData,
          selected: selected
        };

        function makeWord(max, min) {
          var nameLen = Math.ceil(Math.random() * max + min);
          var name = [];
          for (var i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
          }
          return name.join('');
        }
      }

      if (option3 && typeof option3 === "object") {
        myChart3.setOption(option3, true);
      }

      var myChart4 = echarts.init(this.$refs.chart4);
      let option4 = null;
      option4 = {
        // title:{
        //   text:'嵌套环形图'
        // },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:[
              {value:335, name:'直达', selected:true},
              {value:679, name:'营销广告'},
              {value:1548, name:'搜索引擎'}
            ]
          },
          {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
            label: {
              normal: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                // shadowBlur:3,
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
                // shadowColor: '#999',
                // padding: [0, 7],
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  // abg: {
                  //     backgroundColor: '#333',
                  //     width: '100%',
                  //     align: 'right',
                  //     height: 22,
                  //     borderRadius: [4, 4, 0, 0]
                  // },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data:[
              {value:335, name:'直达'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              {value:1048, name:'百度'},
              {value:251, name:'谷歌'},
              {value:147, name:'必应'},
              {value:102, name:'其他'}
            ]
          }
        ]
      };
      if (option4 && typeof option4 === "object") {
        myChart4.setOption(option4, true);
      }

      var myChart5 = echarts.init(this.$refs.chart5);
      let option5 = null;
      var weatherIcons = {
        'Sunny': 'https://www.echartsjs.com/examples/data/asset/img/weather/sunny_128.png',
        'Cloudy': 'https://www.echartsjs.com/examples/data/asset/img/weather/cloudy_128.png',
        'Showers': 'https://www.echartsjs.com/examples/data/asset/img/weather/showers_128.png'
      };
      option5 = {
        title: {
          text: '天气情况统计',
          subtext: '虚构数据',
          left: 'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['西凉', '益州','兖州','荆州','幽州']
        },
        series : [
          {
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:[
              {
                value:1548,
                name: '幽州',
                label: {
                  normal: {
                    formatter: [
                      '{title|{b}}{abg|}',
                      '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                      '{hr|}',
                      '  {Sunny|}{value|202}{rate|55.3%}',
                      '  {Cloudy|}{value|142}{rate|38.9%}',
                      '  {Showers|}{value|21}{rate|5.8%}'
                    ].join('\n'),
                    backgroundColor: '#eee',
                    borderColor: '#777',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                      title: {
                        color: '#eee',
                        align: 'center'
                      },
                      abg: {
                        backgroundColor: '#333',
                        width: '100%',
                        align: 'right',
                        height: 25,
                        borderRadius: [4, 4, 0, 0]
                      },
                      Sunny: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {
                          image: weatherIcons.Sunny
                        }
                      },
                      Cloudy: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {
                          image: weatherIcons.Cloudy
                        }
                      },
                      Showers: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {
                          image: weatherIcons.Showers
                        }
                      },
                      weatherHead: {
                        color: '#333',
                        height: 24,
                        align: 'left'
                      },
                      hr: {
                        borderColor: '#777',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      value: {
                        width: 20,
                        padding: [0, 20, 0, 30],
                        align: 'left'
                      },
                      valueHead: {
                        color: '#333',
                        width: 20,
                        padding: [0, 20, 0, 30],
                        align: 'center'
                      },
                      rate: {
                        width: 40,
                        align: 'right',
                        padding: [0, 10, 0, 0]
                      },
                      rateHead: {
                        color: '#333',
                        width: 40,
                        align: 'center',
                        padding: [0, 10, 0, 0]
                      }
                    }
                  }
                }
              },
              {value:535, name: '荆州'},
              {value:510, name: '兖州'},
              {value:634, name: '益州'},
              {value:735, name: '西凉'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      if (option5 && typeof option5 === "object") {
        myChart5.setOption(option5, true);
      }

      var myChart6 = echarts.init(this.$refs.chart6);
      let option6 = null;
      option6 = {
        title : {
          text: '南丁格尔玫瑰图',
          subtext: '纯属虚构',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x : 'center',
          y : 'bottom',
          data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
              show: true,
              type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        calculable : true,
        series : [
          {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', '50%'],
            roseType : 'radius',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            lableLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            data:[
              {value:10, name:'rose1'},
              {value:5, name:'rose2'},
              {value:15, name:'rose3'},
              {value:25, name:'rose4'},
              {value:20, name:'rose5'},
              {value:35, name:'rose6'},
              {value:30, name:'rose7'},
              {value:40, name:'rose8'}
            ]
          },
          {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            data:[
              {value:10, name:'rose1'},
              {value:5, name:'rose2'},
              {value:15, name:'rose3'},
              {value:25, name:'rose4'},
              {value:20, name:'rose5'},
              {value:35, name:'rose6'},
              {value:30, name:'rose7'},
              {value:40, name:'rose8'}
            ]
          }
        ]
      };
      if (option6 && typeof option6 === "object") {
        myChart6.setOption(option6, true);
      }


    }
  });
</script>
</body>

</html>

